<template>
    <a @click="clickFollow" class="follow" :class="follow.class">
        {{follow.text}}
    </a>
</template>

<script>
// 自定义方法
import { isLoginChose } from '_projectFn/login'
import { toFollow, toCancelFollow } from "_network/request"

export default {
    props: {
        isFollow : {
            default: ''
        },
        userId: {
            default: ''
        },
    },
    methods: {
        clickFollow() {
            if (this.userId && isLoginChose()) {
                const that = this
                if (this.isFollow) {
                    toCancelFollow({
                        userId: this.userId,
                        callback() {
                            that.$emit('setCancelFollow')
                        }
                    })
                } else {
                    toFollow({
                        userId: this.userId,
                        callback() {
                            that.$emit('setFollow')
                        }
                    })
                }
            }
        },
    },
    computed: {
        follow() {
            if (this.isFollow) {
                return {
                    class: 'is-follow',
                    text: '已关注'
                }
            }
            return {
                class: '',
                text: '+ 关注'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.follow {
    height: 28px;
    display: flex;
    background: #0197dd;
    color: white;
    justify-content: center;
    align-items: center;
    width: 76px;
    border-radius: 3px;
    font-size: 12px;
    flex-shrink: 0;
}

.is-follow {
    background: #cccccc !important
}
</style>